import { Flex } from 'antd';
import { FC } from 'react';
import { createStyles } from 'antd-style';

const useStyle = createStyles(({ css }) => {
  const basicStyle = css`
    width: 33%;
    height: 4px;
    background: var(--ycx-primary-color);

    &:after {
      display: block;
      text-align: center;
      color: var(--ycx-font-color-l2);
      font-size: 12px;
      padding-top: 6px;
    }
  `;

  return {
    low: css`
      ${basicStyle};

      &:after {
        content: '低';
      }
    `,
    medium: css`
      ${basicStyle};

      &:after {
        content: '中';
      }
    `,
    high: css`
      ${basicStyle};

      &:after {
        content: '高';
      }
    `,
  };
});

type Props = {
  score: number;
};

const PwdStrength: FC<Props> = ({ score }) => {
  const { styles } = useStyle();
  return (
    <Flex gap={12} className="mb-6 px-2">
      {score > 0 && <div className={styles.low} />}
      {score >= 50 && <div className={styles.medium} />}
      {score >= 60 && <div className={styles.high} />}
    </Flex>
  );
};

export default PwdStrength;
